<template>
  <div>
    <div class="banner container-fuild text-center">我的发布</div>
    <el-collapse v-model="activeName"
                 accordion>

      <el-collapse-item v-for="(item,index) in mysendList"
                        :key="index">
        <template slot="title">
          <div class="table-item">
            <div>
              <div class="item-content">
                <div class="item-titleinfo">
                  <div class="item-logo">
                    <img class="item-logo-img"
                         src=""
                         alt="">
                  </div>
                  <div class="item-name">{{item.product_name}}</div>
                  <div class="item-linetime">{{getproduct_type(item.product_type)}}</div>
                </div>
                <div class="item-maininfo">
                  <div class="item-company">承运商：
                    <span class="item-company-text">{{item.carrier_name}}</span>
                  </div>
                  <div class="item-date">
                    <span class="item-date-text">发布时间：{{item.publish_time}}</span>
                    <span class="able-date"></span>
                  </div>
                </div>
                <div class="item-start-end">
                  <div class="item-start">
                    <div class="start-name">
                      <span class="start-point">起</span>{{item.start_point_name}}
                    </div>
                    <div class="start-date">ETD：{{item.etd_time}}</div>
                  </div>
                  <div class="arrow-logo">
                    <img src=""
                         alt="">
                  </div>
                  <div class="item-end">
                    <div class="end-name">
                      <span class="end-point">终</span>{{item.end_point_name}}
                    </div>
                    <div class="end-date">ETA：{{item.eta_time}}</div>
                  </div>
                </div>

                <div class="item-start-end">
                  <div class="start-name"
                       style="padding-right:40px">
                    <span class="item-date-text">支付条款：{{item.product_paytype}}</span>
                  </div>
                  <div class="end-name">
                    <span style="font-weight:600">单价：{{item.product_price+'  '}}CNY</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </template>
        <!-- 下拉内容 -->
        <div class="xiala">
          <div class="col-xs-16 col-sm-16 col-md-10">
            <el-card class="box-card">
              <!-- <el-descriptions class="margin-top" title="舱位详情" :column="4" :size="size" border>

                <el-descriptions-item>
                  <template slot="label">
                   
                    代运商
                  </template>
                  {{item.company_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    
                    代运商代码
                  </template>
                  {{item.company_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    
                    电话
                  </template>
                  {{item.company_finance_iphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                   
                    业务人
                  </template>
                  {{item.company_finance_user}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    
                    承运商
                  </template>
                  {{item.carrier_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                  
                    承运商代码
                  </template>
                  {{item.carrier_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    
                    电话
                  </template>
                  {{item.carrier_finance_iphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    
                    业务人
                  </template>
                  {{item.carrier_finance_user}}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                   
                    取货地址
                  </template>
                  {{item.start_address}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
           
                    收货地址
                  </template>
                  {{item.end_address}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
           
                    电话
                  </template>
                  {{item.owner_iphone}}
                </el-descriptions-item>                
                <el-descriptions-item>
                  <template slot="label">
                   
                    货主
                  </template>
                  {{item.owner_name}}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
        
                    箱量
                  </template>
                  {{item.product_num}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
 
                    毛重(/KGS)
                  </template>
                  {{item.product_weight}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
       
                    体积(/CBM)
                  </template>
                  {{item.product_volume}}
                </el-descriptions-item>                
                <el-descriptions-item>
                  <template slot="label">

                    价格(/T)
                  </template>
                  {{item.product_price}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                 
                    备注
                  </template>
                  {{item.remark}}
                </el-descriptions-item>

              </el-descriptions> -->
              <el-descriptions class="top-content"
                               title=""
                               direction="vertical"
                               :column="5"
                               border>
                <el-descriptions-item label="舱位编号">{{item.box_code}}</el-descriptions-item>
                <el-descriptions-item label="出发地">{{item.start_point_name}}</el-descriptions-item>
                <el-descriptions-item label="出发地编号">{{item.start_point}}</el-descriptions-item>
                <el-descriptions-item label="目的地">{{item.end_point_name}}</el-descriptions-item>
                <el-descriptions-item label="目的地编号">{{item.end_point}}</el-descriptions-item>

                <el-descriptions-item label="舱位发布时间"
                                      :span='2'>{{item.publish_time}}</el-descriptions-item>
                <el-descriptions-item label="舱位截止时间"
                                      :span='2'>{{item.end_time}}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <!-- <el-tag :type="abletype" size="small">{{getable()}}</el-tag> -->
                </el-descriptions-item>

                <el-descriptions-item label="计划发出时间"
                                      :span='2'>{{item.etd_time}}</el-descriptions-item>
                <el-descriptions-item label="计划到达时间"
                                      :span='2'>{{item.eta_time}}</el-descriptions-item>
                <el-descriptions-item label="计划航程">{{linetime}}天</el-descriptions-item>

                <el-descriptions-item label="箱子类型">{{item.box_type}}</el-descriptions-item>
                <el-descriptions-item label="箱子尺寸">{{item.box_length}}</el-descriptions-item>
                <el-descriptions-item label="箱子代码">{{item.box_code+' '+item.box_type_code}}</el-descriptions-item>
                <el-descriptions-item label="箱子容积">{{item.box_volume}}</el-descriptions-item>
                <el-descriptions-item label="箱子载荷">{{item.box_payload}}</el-descriptions-item>
                <el-descriptions-item label="运输费用">{{item.product_price+'  '}}CNY</el-descriptions-item>
                <el-descriptions-item label="运输条款">{{item.product_paytype}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{item.product_remark ? item.product_remark : "无"}}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>
          <div class="col-xs-8 col-sm-8 col-md-2 ">
            <!-- <el-timeline class="timeline" @click.native="gomap(item)">
              <el-timeline-item size="large" type='primary' color='#0bbd87' :timestamp="item.etd_time">
                离开出发地
              </el-timeline-item>
              <el-timeline-item size="large" icon='el-icon-more' type='primary'>
                运输途中
              </el-timeline-item>
              <el-timeline-item size="large" timestamp="...">
                到达目的地
              </el-timeline-item>
              <el-timeline-item size="large" timestamp="..."> 
                财务核算
              </el-timeline-item>
            </el-timeline> -->

          </div>
        </div>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mysendList: [],
      // activeName: '1',

      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }]
    }
  },
  created () {
    this.getorder()
  },
  methods: {
    getorder () {
      // console.log(this.$store.getters.userinfo.company_code)
      const api = `getmysend?users_id=${this.$store.getters.userinfo.users_id}`
      this.$axios.get(api)
        .then(res => {
          console.log(res.data)
          for (let i = 0; i < res.data.length; i++) {
            this.mysendList.push(res.data[i])
          }
          console.log('发布列表：', this.mysendList)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getproduct_type (data) {
      switch (data) {
        case 'sea':
          return "海运"
        case 'line':
          return "陆运"
        case 'air':
          return "空运"
        case 'railway':
          return "铁路"
        default:
          console.log('其他类型')
          return
      }
    },
  }
}

</script>

<style >
/* 表格 */

.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.table-item {
  /* display: flex; */
  width: 100%;
  padding-left: 30px;
  padding-right: 50px;
}
.el-collapse-item__header {
  height: 130px;
  margin: 20px 200px;
  border: 3px solid rgb(185, 185, 185);
  border-radius: 10px;
}

/* ?? */

.item-content {
  height: 102px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-titleinfo {
  width: 110px;
  text-align: center;
}
.item-logo {
}
.item-name {
  font-size: 14px;
  color: #888;
  padding: 0 10px;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: break-all;
  margin: 0 auto;
}
.item-linetime {
  font-size: 12px;
  color: #4198c7;
}

.item-maininfo {
}
.item-company {
  font-size: 18px;
  color: #666;
}
.item-date {
  color: #07467c;
  font-size: 14px;
}
.able-date {
  margin-left: 20px;
}

.item-start-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-start {
}
.start-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.start-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #07467c;
  color: #fff;
  border-radius: 50%;
}
.start-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}
.arrow-logo {
  margin-right: 25px;
  margin-left: 25px;
  margin-top: 5px;
}
.item-end {
}
.end-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.end-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #bd6664;
  color: #fff;
  border-radius: 50%;
}
.end-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}

/* 下拉内容 */
.xiala {
  margin: 0px 200px;
  padding: 0 20px;
  /* border: 2px solid red; */
  display: flex;
  /* text-align: center; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
